<template>
	<view>
		<!-- 		<view class="fixed-box">
			<view class="tab-bar">
				<view class="back" @click="back" style="width: 60upx; height: 60upx;position: absolute;text-align: center;top: 16upx;">
					<image src="/static/icon/iconfont-back.png" style="width: 16upx;height: 28upx;margin-right: 6upx;"/>
				</view>
				<view style="flex: 1;text-align: center;">{{title}}</view>
				<view style="width: 120upx; height: 60upx;position: absolute;text-align: center;top: 16upx;right: 0upx;" @click="goSearch">
					<image src="../../static/img/ss.png" style="width: 50upx; height: 50upx;"/>
				</view>
			</view>
    </view>-->
		<view class="hand">
			<view class="hand-left">
				<!-- <view>全部课程</view> -->
				<view class="hand-left-menu" v-for="(item,index) in dataList" :key="index" :class="active==index ? 'activeClass' : '' ">
					<view :class="{'hand-left-menu-bbb':item.id == cateId}" tabindex="0">
						<view @click="classification(item)" class="hand-bo">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="hand-right">
					<view v-if="isShow" class="hand-left-menu" @click="goStudy(item)" v-for="(item,index) in courseList" :key="index">
						<view class="hand-box">{{item.name}}</view>
					</view>
					<view v-for="(item,index) in list" :key="index">
						<view @click="goDetail(item)">
							<!-- <image class="info-img" :src="item.imgUrl" options mode="aspectFill" /> -->
							<!-- <view style="margin-left: 10upx;flex:1;"> -->
							<view class="hand-box">{{item.title}}</view>
							<!-- 					<view style="font-size: 18upx;color: #6A6A6A;" v-if="item.status == 0">未开始</view>
								<view style="font-size: 18upx;color: #6A6A6A;" v-if="item.status == 1">未完成</view>
								<view style="font-size: 18upx;color: #6A6A6A;" v-if="item.status == 2">已开始</view> -->
							<!-- </view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	export default {
		data() {
			return {
				cateId: null,
				dataList: [],
				active: 0,
				courseList: [],
				page: 1,
				isShow: false,
				id: null,
				list: []
			}
		},
		onLoad() {
			this.getList()
			// this.getCourse(this.id)
		},
		methods: {
			getList() {
				this.isShow = true
				const params = {
					userId: uni.getStorageSync('userId')
				}
				post_md5('/train-app/course/cate/list', params).then(res => {
					this.dataList = res.data
					for (let i = 0; i < res.data.length; i++) {
						this.courseList = res.data[i].children
						this.id = res.data[0].id
					}
					if (this.id) {
						this.getCourse(this.id)
					}
					if (this.courseList) {
						this.courseList = res.data[0].children
					}
				})
			},
			getCourse(id, item) {
				uni.showNavigationBarLoading() //显示加载动画
				const params = {
					page: this.page,
					userId: uni.getStorageSync('userId'),
					token: uni.getStorageSync('token'),
					cateId: this.cateId ? this.cateId : id,
					orderType: 0
				}
				post_md5('/train-app/courseapp/getcourselist', params, true).then(res => {
					console.log(res)
					uni.stopPullDownRefresh()
					// this.list = res.data.list
					if (res.data.list) {
						for (let i in res.data.list) {
							this.list.push(res.data.list[i])
						}
						this.loadingType = 'more'
					} else {
						this.loadingType = 'noMore'
					}
					if (this.list.length == res.data.totalCount) {
						this.loadingType = 'noMore'
					}
					uni.hideNavigationBarLoading() //关闭加载动画
				})
			},
			back() {
				uni.navigateBack(1)
			},
			classification(item) {
				console.log('123')
				this.cateId = item.id
				this.list = []
				if (item.children.length > 0) {
					this.isShow = true
					this.courseList = item.children
				} else {
					this.isShow = false
					this.getCourse(item)
				}
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			goStudy(item) {
				uni.navigateTo({
					url: '/pages/course/courseList?id=' + item.id
				})
			},
			goDetail(item) {
				if (item.permission == 1) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return
				} else {
					uni.navigateTo({
						url: '/pages/course/detail?id=' + item.id + '&imgUrl=' + item.imgUrl
					})
				}
			},
		}
	}
</script>

<style>
	.tab-bar {
		height: 80upx;
		line-height: 80upx;
		color: #000000;
		font-size: 32upx;
		width: 100%;
		background: #ffffff;
	}

	.course-info-box {
		flex: 1;
		padding: 20upx;
		margin-bottom: 20upx;
		background: #ffffff;
		border-radius: 20upx;
	}

	.fixed-box {
		width: 100%;
		position: fixed;
		top: var(--status-bar-height);
		background: #ffffff;
		z-index: 10;
	}

	.back {
		width: 10upx;
		height: 10upx;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 30upx;
		left: 25upx;
		z-index: 1000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hand {
		display: flex;
		height: 100%;
		margin-top: 20upx;
	}

	.tab-bar {
		height: 80upx;
		line-height: 80upx;
		color: #000000;
		font-size: 32upx;
		width: 100%;
		background: #ffffff;
	}

	.fixed-box {
		width: 100%;
		position: fixed;
		top: var(--status-bar-height);
		background: #ffffff;
		z-index: 10;
	}

	.back {
		width: 10upx;
		height: 10upx;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 30upx;
		left: 25upx;
		z-index: 1000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hand {
		display: flex;
		height: 100%;
	}

	.hand-left {
		width: 120px;
		background: #f9f9f9;
	}

	.hand-left-menu-bbb {
		background-color: #FFFFFF;
		outline: none;
	}

	.hand-left-menu {
		tabIndex: 1;
		width: 120px;
		/* text-overflow: ellipsis; */
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		/* white-space: nowrap; */
	}

	.course-detail {
		line-height: auto;
		font-size: 18upx;
	}

	.hand-bo {
		font-size: 26upx;
		text-align: center;
		line-height: 80upx;
	}

	.hand-box {
		padding: 0;
		margin: 0;
		margin-left: 20upx;
		font-size: 26upx;
		/* text-align: center; */
		line-height: 80upx;
	}

	.info-img {
		width: 300upx;
		height: 130upx;
		border-radius: 20upx;
	}
</style>
